<template>
	<footer class="footer-wrap">
		<div class="footer">
			<div class="footer-service">
				<ul class="service clearfix">
					<li class="service-item">
						<a href="//www.mi.com/service/exchange#repaire" target="_blank">
							<span class="icon"><i class="fa fa-gavel"></i></span>
							1小时快修服务
						</a>
					</li>
					<li class="service-item">
						<a href="//www.mi.com/service/exchange#back" target="_blank">
							<span class="icon"><i class="fa fa-history"></i></span>
							7天无条件退货
						</a>
					</li>
					<li class="service-item">
						<a href="//www.mi.com/service/exchange#free" target="_blank">
							<span class="icon"><i class="fa fa-history"></i></span>
							15天免费换货
						</a>
					</li>
					<li class="service-item">
						<a href="//www.mi.com/service/exchange#mail" target="_blank">
							<span class="icon"><i class="fa fa-gift"></i></span>
							满150元包邮
						</a>
					</li>
					<li class="service-item">
						<a href="//www.mi.com/static/maintainlocation/" target="_blank">
							<span class="icon"><i class="fa fa-location-arrow"></i></span>
							520余家售后网点
						</a>
					</li>
				</ul>
			</div>
			<div class="footer-info">
				<ul class="footer-content clearfix">
					<li class="footer-item">
						<article class="col-links">
							<h3>
								帮助中心
							</h3>
							<p>
								<a href="//www.mi.com/service/account/register/" target="_blank">账户管理</a>
							</p>
							<p>
								<a href="//www.mi.com/service/buy/buytime/" target="_blank">购物指南</a>

							</p>
							<p>
								<a href="//www.mi.com/service/order/sendprogress/" target="_blank">订单操作</a>
							</p>
						</article>
					</li>
					<li class="footer-item">
						<article class="col-links">
							<h3>
								服务支持
							</h3>
							<p>
								<a href="//www.mi.com/service/exchange" target="_blank">售后政策</a>
							</p>
							<p>
								<a href="http://fuwu.mi.com/" target="_blank">自助服务</a>

							</p>
							<p>
								<a href="http://xiazai.mi.com/" target="_blank">相关下载</a>
							</p>
						</article>
					</li>
					<li class="footer-item">
						<article class="col-links">
							<h3>
								线下门店
							</h3>
							<p>
								<a href="//www.mi.com/c/xiaomizhijia/" target="_blank">小米之家</a>
							</p>
							<p>
								<a href="//www.mi.com/static/maintainlocation/" target="_blank">服务网点</a>

							</p>
							<p>
								<a href="//www.mi.com/static/familyLocation/" target="_blank">零售网点</a>
							</p>
						</article>
					</li>
					<li class="footer-item">
						<article class="col-links">
							<h3>
								关于小米
							</h3>
							<p>
								<a href="//www.mi.com/about" target="_blank">了解小米</a>
							</p>
							<p>
								<a href="http://hr.xiaomi.com/" target="_blank">加入小米</a>

							</p>
							<p>
								<a href="//www.mi.com/about/contact" target="_blank">联系我们</a>
							</p>
						</article>
					</li>
					<li class="footer-item">
						<article class="col-links">
							<h3>
								关注我们
							</h3>
							<p>
								<a href="http://e.weibo.com/xiaomishouji" target="_blank">新浪微博</a>
							</p>
							<p>
								<a href="http://xiaoqu.qq.com/mobile/share/index.html?url=http%3A%2F%2Fxiaoqu.qq.com%2Fmobile%2Fbarindex.html%3Fwebview%3D1%26type%3D%26source%3Dindex%26_lv%3D25741%26sid%3D%26_wv%3D5123%26_bid%3D128%26%23bid%3D10525%26from%3Dwechat" target="_blank">小米部落</a>
							</p>
							<p>
								<a href="javascript:void(0)" target="_blank">官方微信</a>
							</p>
						</article>
					</li>
					<li class="footer-item">
						<article class="col-links">
							<h3>
								特色服务
							</h3>
							<p>
								<a href="//order.mi.com/queue/f2code" target="_blank">F码通道</a>
							</p>
							<p>
								<a href="//www.mi.com/mimobile/" target="_blank">小米移动</a>

							</p>
							<p>
								<a href="//order.mi.com/misc/checkitem" target="_blank">防伪查询</a>
							</p>
						</article>
					</li>
					<li class="footer-last-item">
						<div class="col-content">
							<h3 class="phone-number">400-100-5678</h3>
							<p class="phone-desc">
								周一至周日 8:00-18:00<br/>（仅收市话费）
							</p>
							<a href="//www.mi.com/service/contact" target="_blank">
								<span class="server-btn">
									<i></i>
									24小时在线客服
								</span>
							</a>
						</div>
					</li>
				</ul>
			</div>
			<div class="site-info">
				<div class="footer-explan clearfix">
					<img class="logo-img" src="http://s01.mifile.cn/i/logo-footer.png?v2" alt="" />
					<div class="explan-content">
						<ul class="links clearfix">
							<li class="link-item"><a href="//www.mi.com/index.html">小米商城</a></li>
							<li class="link-item"><a href="http://www.miui.com/" target="_blank">MIUI</a></li>
							<li class="link-item"><a href="http://www.miliao.com/" target="_blank">米聊</a></li>
							<li class="link-item"><a href="http://www.duokan.com/" target="_blank">多看书城</a></li>
							<li class="link-item"><a href="http://www.miwifi.com/" target="_blank">小米路由器</a></li>
							<li class="link-item"><a href="http://call.mi.com/" target="_blank">视频电话</a></li>
							<li class="link-item"><a href="http://blog.xiaomi.com/" target="_blank">小米后院</a></li>
							<li class="link-item"><a href="http://xiaomi.tmall.com/" target="_blank">小米天猫店</a></li>
							<li class="link-item"><a href="http://shop115048570.taobao.com" target="_blank">小米淘宝直营店</a></li>
							<li class="link-item"><a href="http://union.mi.com/" target="_blank">小米网盟</a></li>
							<li class="link-item"><a href="javascript:void(0)">问题反馈</a></li>
							<li class="link-item"><a href="javascript:void(0)">Select Region</a></li>
						</ul>
						<p class="explan-txt">
							©<a href="//www.mi.com/index.html">mi.com</a> 京ICP证110507号 京ICP备10046444号 <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134" target="_blank">京公网安备11010802020134号 </a> <a href="//c1.mifile.cn/f/i/2013/cn/jingwangwen.jpg" target="_blank">京网文[2014]0059-0009号</a><br/>
							 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
						</p>
					</div>
					<img class="logo-explan logo-explan-first" src="http://privacy-policy.truste.com/privacy-seal/seal?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8" alt="" />
					<img class="logo-explan" src="http://s01.mifile.cn/i/v-logo-2.png" alt="" />
					<img class="logo-explan" src="http://s01.mifile.cn/i/v-logo-1.png" alt="" />
					<img class="logo-explan" src="http://s01.mifile.cn/i/v-logo-3.png" alt="" />
				</div>
				<p class="footer-desc">
					探索黑科技，小米为发烧而生
				</p>
			</div>
		</div>
	</footer>
</template>

<script>
export default {
	data () {
		return {
		}
	}
}
</script>

<style>
.footer {
	width: 1226px;
	height: auto;
	margin: 0 auto;
	padding-bottom: 20px;
}

.footer-service {
	padding: 27px 0;
	border-bottom: 1px solid #e0e0e0;
}
.service {
	.service-item {
		float: left;
		width: 245px;
		height: 27px;
		line-height: 27px;
		font-size: 16px;
		color: #616161;
		padding: 0 40px;
		box-sizing: border-box;
		border-right: 1px solid #e0e0e0;
		&:nth-last-child(1) {
			border-right: 0;
		}
		.icon {
			display: inline-block;
			height: 27px;
			line-height: 27px;
			font-size: 24px;
			margin-right: 10px;
		}
	}
}
.footer-info {
	padding: 40px 0;
}

.footer-content {
	.footer-item {
		float: left;
		width: 160px;
		height: 120px;
		a {
			text-decoration: none;
			color: #333;
		}
		&:nth-last-child(2) {
			padding-right: 20px;
			border-right: 1px solid #e0e0e0;
		}
		h3 {
			font-size: 14px;
			font-weight: normal;
			margin-bottom: 26px;
		}
		p {
			font-size: 12px;
			margin-top: 10px;
		}
	}
	.footer-last-item {
		float: left;
		.col-content {
			margin-left: 40px;
			.phone-number {
				margin: 0 0 5px;
				font-size: 22px;
				text-align: center;
				margin-bottom: 5px;
				color: #ff6700;
			}
			.phone-desc {
				font-size: 12px;
				line-height: 1.5;
				text-align: center;
    		color: #616161;
			}
			.server-btn {
				display: block;
				width: 120px;
				height: 30px;
				line-height: 30px;
				font-size: 12px;
				text-align: center;
				margin: 0 auto;
				border: 1px solid #ff6700;
				color: #ff6700;
				cursor: pointer;
				&:hover {
					background: #ff6700;
					color: #fff;
				}
			}
		}
	}
}

.footer-explan {
	.logo-img {
		float: left;
		width: 57px;
		height: 57px;
	}
	.explan-content {
		float: left;
		padding-left: 10px;
		.links {
			.link-item {
				float: left;
				padding: 0 5px;
				font-size: 12px;
				color: #757575;
				border-right: 1px solid #757575;
				&:nth-last-child(1) {
					border-right: 0;
				}
			}
		}
	}
	.explan-txt {
		margin: 10px 0 0 5px;
		line-height: 18px;
		font-size: 12px;
		color: #b0b0b0;
		a {
			text-decoration: none;
			color: #b0b0b0;
			&:hover {
				color: #ff6700;
			}
		}
	}
	.logo-explan {
		width: 85px;
		height: 28px;
		&.logo-explan-first {
			margin-left: 50px;
		}
	}
}

.site-info {
	padding: 30px 0;
	.footer-desc {
		text-align: left;
		text-indent: -9999em;
		overflow: hidden;
		width: 267px;
		height: 19px;
		margin: 30px auto 0;
		background: url('http://s01.mifile.cn/i/slogan2016.png') center center no-repeat;
	}
}
</style>
